<template>
  <div>
    <div class="user-form">
      <el-form
        :model="userForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="头像">
          <single-upload v-model="userForm.icon">
            <el-button v-if="!userForm.icon" size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过10MB
            </div>
          </single-upload>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input disabled v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input disabled v-model="userForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input disabled v-model="userForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
          <el-button size="small" type="primary" @click="goback()"
            >返回</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import SingleUpload from "@/components/Upload/uploadOne";
import { getUserInfo, editUserInfo } from "@/api/login";
import { getUid, switchHost, authEmail } from "@/utils/auth";
import store from "../../store";
export default {
  components: {
    SingleUpload,
  },
  data() {
    //这个方法要写在用到这个方法的地方的前面
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3-9][0-9]\d{8}$/;
        // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
        if (reg.test(value)) {
          callback();
        } else {
          // 具体错误信息没有提示
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      userForm: {
        username: "",
        nickName: "",
        email: "",
        phoneNumber: "",
        password: "",
        icon: "",
      },
      uid: getUid(),
      rules: {
        phoneNumber: [
          {
            required: true,
            min: 11,
            message: "手机号不足11位",
            trigger: "blur",
          },
          { validator: checkPhone, trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      getUserInfo(this.uid).then((res) => {
        // console.log(res);
        const currentHost = "minio";
        const targetHost = "192.168.0.116";

        this.userForm.email = res.data.email;
        this.userForm.icon = res.data.icon
          ? switchHost(res.data.icon, currentHost, targetHost)
          : "";
        this.userForm.phoneNumber = res.data.phoneNumber;
        this.userForm.nickName = res.data.nickName;
        this.userForm.password = res.data.password;
        this.userForm.username = res.data.username;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const originalUrl = this.userForm.icon;

          this.userForm.icon = switchHost(originalUrl);
          if (this.userForm.email && !authEmail(this.userForm.email)) {
            return this.$message.error('请输入正确的邮箱')
          }
          editUserInfo(this.uid, this.userForm).then((res) => {
            this.$message.success("修改成功");
            store.dispatch("GetInfo").then((res) => {
              // console.log(res);
            });
            return this.getUserInfo();
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },

    goback() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.user-form {
  width: 600px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
